<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="copyright" content="www.infoearth.com" />
		<title>地质灾害应急调查</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" href="../lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="../lib/jquery.mobile-1.4.5/jquery.min.js"></script>
		<script src="../lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script src="../lib/config.js"></script>
		<script src="../lib/common.js"></script>
		<style>
			header {
				background-color: rgb(90,153,222);
				border-bottom: 1px solid #f2f2f2;
			}
			body {
				padding: 0;
				margin: 0;
			}
			html, body, #map {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<header id='header'>
			<div class="header" style="height:32px;">
				<div style="float: left;margin:10px 10px;">
					<a> <img src="../image/msn_messenger.png" style="height:24px;"/> </a>
				</div>
				<div style="float:left;margin:12px 0px;color:rgb(255,255,255);font-size: 18px;">
					<span id='title'>地质灾害应急调查系统</span>
				</div>
			</div>
			<div style="clear: both;"></div>
		</header>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				api.closeWin();
			});
			$api.fixStatusBar($api.dom('header'));
			initialTabBar();
			openDataGather();
		}
		function initialTabBar() {
			var obj = api.require('tabBar');
			obj.open({
				bgImg : 'widget://image/bg.png',
				selectImg : 'widget://image/sel.png',
				items : [{
					title : '数据采集',
					img : 'widget://image/DataGather.png'
				}, {
					title : '数据上报',
					img : 'widget://image/DataUpload.png'
				}, {
					title : '指挥体系',
					img : 'widget://image/Zhtx.png'
				}, {
					title : '周边信息',
					img : 'widget://image/Map.png'
				}]
			}, function(ret, err) {
				switch(ret.index) {
					case 0:
						openDataGather();
						break;
					case 1:
						openDataUpload();
						break;
					case 2:
						openZhtx();
						break;
					case 3:
						openNearInfo();
						break;
				}
			});
		}

		function openDataGather() {
			closeFrames();
			var header = $api.byId('header');
			var headerPos = $api.offset(header);
			api.openFrame({
				name : 'dataGather',
				url : 'dataGather.html',
				rect : {
					x : headerPos.l,
					y : headerPos.t + headerPos.h,
					w : api.frameWidth,
					h : api.frameHeight - headerPos.h - 50
				},
				pageParam : {
					name : 'test'
				},
				bounces : false,
				bgColor : 'rgba(0,0,0,0)',
				vScrollBarEnabled : true,
				hScrollBarEnabled : false
			});
		}

		function openDataUpload() {
			closeFrames();
			var header = $api.byId('header');
			var headerPos = $api.offset(header);
			api.openFrame({
				name : 'dataUpload',
				url : 'dataUpload.html',
				rect : {
					x : headerPos.l,
					y : headerPos.t + headerPos.h,
					w : api.frameWidth,
					h : api.frameHeight - headerPos.h - 50
				},
				pageParam : {
					name : 'test'
				},
				bounces : false,
				bgColor : 'rgba(0,0,0,0)',
				vScrollBarEnabled : true,
				hScrollBarEnabled : false
			});
		}

		function openZhtx() {
			closeFrames();
			var header = $api.byId('header');
			var headerPos = $api.offset(header);
			api.openFrame({
				name : 'zhtxInfo',
				url : 'zhtxInfo.html',
				rect : {
					x : headerPos.l,
					y : headerPos.t + headerPos.h,
					w : api.frameWidth,
					h : api.frameHeight - headerPos.h - 50
				},
				pageParam : {
					name : 'test'
				},
				bounces : false,
				bgColor : 'rgba(0,0,0,0)',
				vScrollBarEnabled : true,
				hScrollBarEnabled : false
			});
		}

		function openNearInfo() {
			closeFrames();
			var header = $api.byId('header');
			var headerPos = $api.offset(header);
			console.log(headerPos.t + headerPos.h);
			api.openFrame({
				name : 'nearInfo',
				url : 'nearInfo.html',
				rect : {
					x : headerPos.l,
					y : headerPos.t + headerPos.h,
					w : api.frameWidth,
					h : api.frameHeight - headerPos.h - 50
				},
				pageParam : {
					name : 'test'
				},
				bounces : false,
				bgColor : 'rgba(0,0,0,0)',
				vScrollBarEnabled : false,
				hScrollBarEnabled : false
			});
		}

		function closeFrames() {
			api.closeFrame({
				name : 'dataGather'
			});
			api.closeFrame({
				name : 'dataUpload'
			});
			api.closeFrame({
				name : 'nearInfo'
			});
			api.closeFrame({
				name : 'zhtxInfo'
			});
		}
	</script>
</html>